// pages/detail-search/index.js
// 导入封装的功能函数
import { 
  debounce, // 导入封装的防抖函数
  createNodes // 导入封装的创建节点的函数
} from "../../../hooks/index";

// 导入接口
import { 
  getSearchHot, // 热门搜索的接口
  getSearchSuggest, // 搜索建议的接口（在搜索框输入，进行查询关键字）
  getSearchResult // 搜索音乐的接口（在输入框输入关键字后，按回车进行搜索）
} from "../../../service/api_search"; // 搜索的接口文件

Page({
  data: {
    hotKeywords: [], // 搜索关键字的数据
    suggestSongs: [], // 搜索的歌曲数据
    searchValue: "", // 输入的关键字
    suggestSongsNodes: [], // 用来展示搜索的歌曲列表的富文本内容
    resultSongs: [], // 搜索到的所有歌曲
  },

  onLoad() {
    // 调用热门搜索函数
    this.getPageData();
  },

  // 获取热门搜索数据
  getPageData() {
    // 发送请求
    getSearchHot().then(res => {
      this.setData({ hotKeywords: res.result.hots });
    });
  },

  // 搜索框输入时触发的事件（使用防抖）
  handleSearchChange: debounce(function(event) {
    const searchValue = event.detail; // 获取输入框的内容

    // 保存关键字
    this.setData({ searchValue });

    // 输入框没有值的时候，直接返回
    if(!searchValue.length) {
      // 清空数据
      this.setData({ suggestSongs: [] });
      this.setData({ resultSongs: [] }); 
      return;
    };

    // 发送请求
    getSearchSuggest(searchValue).then(res => {
      const suggestSongs = res.result.allMatch; // 获取输入的关键字后获取到的歌曲
      this.setData({ suggestSongs: res.result.allMatch });

      // 转成 nodes 节点
      const suggestKeywords = suggestSongs.map(item => item.keyword); // 先变为数组形式
      const suggestSongsNodes = []; // 最终要渲染的节点

      // 进行遍历匹配（输入的内容和展示的歌曲的匹配）
      for(const keyword of suggestKeywords) {
        // 调用创建节点的方法
        const nodes = createNodes(keyword, searchValue);
        suggestSongsNodes.push(nodes);
      }

      // 将最终要渲染的节点全部更新在 data 数据中
      this.setData({ suggestSongsNodes });
    });
  }, 300),

  // 按回车进行搜索歌曲
  handleSearchAction() {
    const searchValue = this.data.searchValue; // 搜索的关键字
    // 发送请求
    getSearchResult(searchValue).then(res => {
      this.setData({ resultSongs: res.result.songs });
    });
  },

  // 点击搜索框中 item 歌曲和热门搜索中的 item 歌曲触发的事件
  handleKeywordItemClick(event) {
    // 1、获取关键字
    const keyword = event.currentTarget.dataset.keyword;

    // 2、将关键字设置到 searchValue
    this.setData({ searchValue: keyword });

    // 3、发送网络请求
    this.handleSearchAction();
  }
});
